//
//  PhoneInputLoginPage.swift
//  Casecord
//
//  Created by baozi on 2024/1/3.
//

import SwiftUI

struct PhoneInputLoginPage: View {
    @EnvironmentObject var route: Router
    @State var phoneTxt: String = ""
    @State var isShowNationSel: Bool = false
    @State var country: Country = Country(countryCode: "CN", name: "China mainland", currencyCode: "CN", currencySimbol: "CN¥", phoneCode: "+86", flag: "🇨🇳")
    var logic = PhoneLoginLogic()
    
    var body: some View {
        ZStack {
            Theme.color.primaryBackgroundColor
                .ignoresSafeArea()
            VStack {
                Color.clear.frame(height: 100)
                HStack {
                    HStack{
                        Text("\(country.phoneCode)")
                        Image(systemName: "chevron.forward")
                    }
                    .foregroundColor(Theme.color.primaryBackgroundColor)
                    .padding()
                    .onTapGesture {
                        actionOnNationSel()
                    }
                    TextField("input phonenumber", text: $phoneTxt)
                        .foregroundColor(Theme.color.primaryBackgroundColor)
                        .keyboardType(.numberPad)
                        .onSubmit() {
                            print("点击确定")
                        }
                }
                .frame(maxWidth: .infinity)
                .frame(height: 55)
                .withCapsuleBg(colors: [Theme.color.title])
                .padding(.horizontal, 20)
                
                Button(action: {
                    actionOnNext()
                }, label: {
                    Text("Next")
                        .foregroundColor(Theme.color.primaryBackgroundColor)
                })
                .frame(width: 100, height: 50)
                .withCapsuleBg(colors: [Color.white], shadow: .gray, radius: 5)
                .paddingTop(50)
                Spacer()
            }
            .sheet(isPresented: $isShowNationSel, onDismiss: {
                isShowNationSel = false
            }, content: {
                ListView(showPhoneNumber: isShowNationSel,  CountrySelectedColor: .blue, cournerRadiusCountrySelcted: 10, backgroundColorList: .black, showCountries: $isShowNationSel, countrySelected: $country)
            })
            .setCustomNav(title: "Registe or Login")
            .foregroundColor(Color.white)
        }
        .onAppear(perform: {
            self.logic.router = route
        })
    }
    
    func actionOnNationSel() {
        isShowNationSel.toggle()
    }
    
    func actionOnNext() {
        if phoneTxt.isEmpty {
            ToastManager.show(text: "PhoneNumber is should not empty")
        } else {
            let areaCode = country.phoneCode.replacingOccurrences(of: "+", with: "")
            logic.toPhoneCheck(areaCode: areaCode, phone: phoneTxt)
        }
    }
    
}

#Preview {
    PhoneInputLoginPage()
        .environmentObject(Router())
}
